<template>
    <el-row>
        <el-row>
            <el-col class="title box box-pack-start">
                <el-form :inline="true">
                    <el-form-item label="学级">
                        <el-select v-model="form.xj" placeholder="请选择" @change="selectXj" class="text">
                            <el-option :label="item+`级`" :value="item" v-for="(item,i) in xjList" :key="i"></el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item label="班级">
                    <el-select  v-model="form.bjdm" placeholder="请选择" @change="selectBj" class="text" filterable>
                        <el-option :label="item.bjmc" :value="item.bjdm" v-for="(item,i) in classList" :key="i"></el-option>
                    </el-select>
                    </el-form-item>
                </el-form>
            </el-col>
        </el-row>

        <el-row class="mt20">
            <el-col>
                <el-table :data="page.list" stripe style="width: 1201px"
                    :header-cell-style="{background:'#F0F1F8', color:'#2F3142'}" border>
                    <el-table-column type="index" label="序号" width="200" align="center"></el-table-column>
                    <el-table-column prop="name" label="学生姓名" width="300" align="center"></el-table-column>
                    <el-table-column prop="sn" label="学号" width="300"  align="center"></el-table-column>
                    <el-table-column prop="acc" label="身份证号" width="400"  align="center"></el-table-column>
                </el-table>
                <el-pagination style="margin: 50px;"  @current-change="getStu" background layout="prev, pager, next" :total="page.total"
                    :current-page="page.pageNum" :page-size="page.pageSize" hide-on-single-page></el-pagination>
            </el-col>
        </el-row>
    </el-row>
</template>

<script>
    export default {
        data() {
            return {
                form:{
                   xj:'',
                   bjdm:''
                },
                loginInfo: this.$store.state.loginInfo,
                xjList:[],
                classList:[],
                page: {
                    total: 0,
                    pageSize: 10,
                    pageNum: 1,
                    list: []
                },
            };
        },
        mounted() {
            this.getXj();
        },
        methods: {
            getXj() {
                let params = {
                    schoolid: this.loginInfo.user.schoolId
                };
                this.$api.Admin.getXjListData(params).then(res => {
                    if (res.code == '0') {
                        this.xjList = res.list;
                        this.form.xj = res.list[0]
                        this.getClass();
                    }
                })
            },
            getClass() {
                let params = {
                    schoolid: this.loginInfo.user.schoolId,
                    xj: this.form.xj
                };
                this.$api.Admin.getClassListData(params).then(res => {
                    if (res.code == '0') {
                        this.classList = res.list;
                        this.form.bjdm = res.list[0].bjdm
                        this.getStu()
                    }
                })
            },
            getStu(pageNum){
                let params = {
                    schoolid: this.loginInfo.user.schoolId,
                    bjdm: this.form.bjdm,
                    pageNum:pageNum
                };
                this.$api.Admin.getStuListData(params).then(res => {
                    if (res.code == '0') {
                        this.page = res.list
                    }
                })
            },
            selectXj(e){
                this.form.xj = e;
                this.getClass();
            },
            selectBj(e){
                this.form.classid = e;
                this.getStu();
            },
        }
    }
</script>

<style>
    .el-table .warning-row {
        background: oldlace;
    }

    .el-table .success-row {
        background: #f0f9eb;
    }
</style>
